<template>
    <div class="wrap" @click="click">
        <div class="header">
            <span class="index">{{index+1}}-第{{label.page}}页</span>
            <span class="date">{{label.dates}}</span>
            <span style="float : right">
                <a-space size="small">
                <a-icon type="edit" @click.stop="editLabel" :style="{ color: '#8590a6' }" />
                <a-popconfirm placement="topRight" ok-text="确定" cancel-text="取消" @confirm.stop="deleteLabel">
                    <template slot="title">
                        <p>确定要删除</p>
                    </template>
                    <a-icon type="delete"  :style="{ color: '#8590a6' }" />
                    <!-- @click.stop="deleteLabel" -->
                </a-popconfirm>
                </a-space>
            </span>
        </div>
        <div class="main">
            <div class="prove" v-html="label.prove"></div>
            <div class="text" v-html="label.content"></div>
            <div class="remark" >
                备注: 
                {{label.remark}}
            </div>
        </div>
         <div style="margin: 10px 10px; line-height:30px" > 
            <template v-for="keyword in label.keywords">
                <a-tag :key="keyword">
                {{ keyword }}
                </a-tag>
            </template>
         </div>
    </div>
</template>

<script>
export default {
    props:{
        label : Object,
        index : Number
    },
    methods:{
        click(){
            this.$emit("labelClick",this.label.page)
        },
        editLabel(){
            this.$emit("editLabel")
        },
        deleteLabel(){
            this.$emit("deleteLabel",this.label.id)
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrap
    display flex
    flex-direction column
    background #fff
    margin-top 15px
    border 1px solid rgba(100,100,100,.1)
    cursor pointer
    .header
        padding 10px 15px
        border-bottom 0.5px solid rgba(200,200,200,0.5)
        .index
            color #FF9966
            font-size 12px
            background #ededed
            padding 3px 5px
            border-radius 3px
        .date
            color #999
            font-size 12px
            margin-left 10px
    .main
        padding 10px 15px
        font-size 14px
        .text
            font-size 12px
            line-height 20px
            height: 60px ;
            text-overflow ellipsis
            overflow: hidden;
            line-clamp: 3;
            border-radius 5px
            margin 5px 0px
            word-wrap: break-word;
            background rgba(230,230,230,0.3 )
            padding 8px
        .remark
            font-size 10px
            padding 8px
</style>